<template>
  <div class="app-container">
    <div class="topform">
      <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                autocomplete="off"/>
      <el-button type="primary" style="margin-left: 10px" @click="getlistdata(true)" icon="el-icon-search">搜索
      </el-button>
      <el-button type="primary" @click="dialog=true" icon="el-icon-circle-plus-outline">添加</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              header-cell-class-name="tableheader">
      <el-table-column align="center" label="角色名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="getrole(scope.row)" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="角色设置" :visible.sync="dialog" width="35%" @closed="dialogclose">
      <el-form :model="dialogform" ref="dialogform" :rules="rule" label-width="120px">
        <el-form-item label="角色名称：" prop="name">
          <el-input v-model="dialogform.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="dialogform.remark" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限分配：">
          <el-tree ref="role" :data="allrole" :props="props" node-key="name" :default-checked-keys="checked_list"
                   :check-strictly="true" :show-checkbox="true"></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogbtn">保存</el-button>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="form.page"
          :page-size="form.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script type="es6">
export default {
  data() {
    return {
      form: {
        serchKeyword: '',
        page: 1,
        pagesize: 13
      },
      dialogform: {
        id: '',
        remark: '',
        name: '',
        diy_menus: []
      },
      rule: {
        name: [
          { required: true, message: '此项为必填项' }
        ],
      },
      props: {
        label: function (item) {
          return item.meta.title
        },
        children: "children"
      },
      allrole: [],
      checked_list: [],
      list: [],
      total: 0,
      listLoading: true,
      dialog: false,
    };
  },
  created() {
    this.getlistdata();
    this.getrole();
  },
  methods: {
    //获取角色数据
    getlistdata(isquery) {
      if (isquery === true) {
        this.form.page = 1
      }
      this.listLoading = true;
      this.$post(this.$api + '/get_role_list', {
        'serchKeyword': this.form.serchKeyword,
        'isPage': true,
        'page': this.form.page,
        'pagesize': this.form.pagesize
      })
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    //获取树形菜单
    getrole(item) {
      var role_id = ''
      if (item) {
        role_id = item.id
      } else {
        role_id = ''
      }
      this.$get(this.$api + '/get_mini_menu_tree', {
        'role_id': role_id
      })
          .then((res) => {
            if (res.code === 0) {
              this.allrole = res.data.tree_list;
              if (item) {
                this.dialogform.remark = item.remark;
                this.dialogform.name = item.name;
                this.dialogform.id = item.id;
                this.checked_list = res.data.checked_list;
                this.dialog = true;
              }
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          })
    },
    //关闭弹框
    dialogclose() {
      this.dialogform = {
        id: '',
        remark: '',
        name: '',
        diy_menus: [],
      };
      this.$nextTick(() => {
        this.$refs.role.setCheckedNodes([]);
      });
    },
    //确定按钮
    dialogbtn() {
      this.$refs['dialogform'].validate((valid) => {
        if (valid) {
          this.listLoading = true;
          let menu = [];
          var Checkrole = this.$refs.role.getCheckedNodes(false, true)
          for (var i in Checkrole) {
            menu.push(Checkrole[i].name);
          }
          let diy_menus = Array.from(new Set(menu));
          let role = {
            'id': this.dialogform.id,
            'remark': this.dialogform.remark,
            'name': this.dialogform.name,
          };
          this.$post(this.$api + '/save_role', {
            'role': role,
            'diy_menus': diy_menus
          })
              .then((res) => {
                this.listLoading = false;
                if (res.code === 0) {
                  this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                  });
                  this.dialog = false;
                  this.getlistdata();
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                  });
                }
              });
        }
      })
    },
    handleSizeChange(v) {
      this.form.pagesize = v;
      this.getlistdata();
    },
    handleCurrentChange(v) {
      this.form.page = v;
      this.getlistdata();
    }
  }
}
</script>
